<template>
  <div>
    <el-input
      v-model="input"
      style="width: 400px; margin: 10px"
      placeholder="添加新标签"
    />
    <el-button type="success" icon="el-icon-plus" @click="open()"
      >新建</el-button
    >
    <el-table :data="tableData" border style="width: 100%; text-align: center">
      <el-table-column fixed prop="data" label="日期" width="180" />
      <el-table-column prop="tag" label="标签名称" width="300" />
      <el-table-column prop="like_tag" label="兴趣标签" />

      <el-table-column fixed="right" label="操作" width="300">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >重命名</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      tableData: [
        {
          data: "2020.10.21",
          tag: "标签一",
          like_tag: "标签一",
          sc: "删除",
        },
        {
          data: "2020.10.21",
          tag: "标签一",
          like_tag: "标签一",
          sc: "删除",
        },
        {
          data: "2020.10.21",
          tag: "标签一",
          like_tag: "标签一",
          sc: "删除",
        },
        {
          data: "2020.10.21",
          tag: "标签一",
          like_tag: "标签一",
          sc: "删除",
        },
        {
          data: "2020.10.21",
          tag: "标签一",
          like_tag: "标签一",
          sc: "删除",
        },
      ],
      input: "",
    };
  },
  methods: {
    open() {
      this.$alert("您的新标签添加成功", "温馨提示", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.$message({
            type: "info",
            message: `action: ${action}`,
          });
        },
      });
    },
    redirNmae() {
      this.$prompt("请输入您的标签名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style>
</style>
